<template>
  <el-dialog
    :title="!dataForm.id ? '新增' : '修改'"
    :close-on-click-modal="false" width="700px"
    :visible.sync="visible">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" inline @keyup.enter.native="dataFormSubmit()" label-width="140px">
      <el-form-item label="收运单位名称" prop="name">
        <el-input v-model="dataForm.name" placeholder="收运单位名称" style="width: 480px;"></el-input>
      </el-form-item>
      <el-form-item label="统一社会信用代码" prop="creditCode">
        <el-input v-model="dataForm.creditCode" placeholder="统一社会信用代码" style="width: 480px;"></el-input>
      </el-form-item>
      <el-form-item label="行政区域" prop="areaCodes">
        <el-cascader :options="regionData" v-model="dataForm.areaCodes" style="width: 480px;">
        </el-cascader>
      </el-form-item>
      <el-form-item label="详细地址" prop="address">
        <el-input v-model="dataForm.address" placeholder="地址" style="width: 480px;"></el-input>
      </el-form-item>
      <el-form-item label="负责人" prop="principalId">
        <el-select filterable clearable v-model="dataForm.principalId" placeholder="请选择负责人" style="width: 480px;">
          <el-option v-for="user in userList" :key="user.userId" :label="user.username" :value="user.userId">
            <span>{{ user.username }}</span><span style="float: right;">{{ user.mobile }}</span>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input type="textarea" v-model="dataForm.remark" placeholder="备注" maxlength="180" show-word-limit style="width: 480px;"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { regionData } from 'element-china-area-data'
export default {
  data () {
    return {
      visible: false,
      userList: [],
      regionData: regionData, // 级联绑定的省市区资源数据
      selectedOptions: [],  // 选中绑定数据
      dataForm: {
        id: 0,
        name: '',
        creditCode: '',
        address: '',
        principalId: '',
        remark: '',
        areaCodes: []
      },
      dataRule: {
        name: [
          { required: true, message: '收运单位名称不能为空', trigger: 'blur' }
        ],
        creditCode: [
          { required: true, message: '统一社会信用代码不能为空', trigger: 'blur' }
        ],
        areaCodes: [
            { type: 'array', required: true, message: '行政区域不能为空', trigger: 'change' }
        ],
        principalId: [
          { required: true, message: '负责人不能为空', trigger: 'change' }
        ],
        remark: [
          { required: false, message: '备注不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  mounted () {
    this.getUserListByRoleName('收运单位管理员')
  },
  methods: {
    init (id) {
      this.dataForm.id = id || 0
      this.visible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()
        this.selectedOptions = []
        if (this.dataForm.id) {
          this.$http({
            url: this.$http.adornUrl(`/sign/signunit/info/${this.dataForm.id}`),
            method: 'get',
            params: this.$http.adornParams()
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.dataForm.name = data.signUnit.name
              this.dataForm.creditCode = data.signUnit.creditCode
              this.dataForm.principalId = data.signUnit.principalId
              this.dataForm.address = data.signUnit.address
              this.dataForm.remark = data.signUnit.remark
              this.dataForm.areaCodes = [data.signUnit.province, data.signUnit.city, data.signUnit.area]
            }
          })
        }
      })
    },
    getUserListByRoleName (roleName) {
      this.$http({
        url: this.$http.adornUrl(`/sys/user/rolename`),
        method: 'post',
        data: this.$http.adornData({ roleName: roleName })
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.userList = data.list || []
        } else {
          this.userList = []
        }
      })
    },
      // 表单提交
    dataFormSubmit () {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(`/sign/signunit/${!this.dataForm.id ? 'save' : 'update'}`),
            method: 'post',
            data: this.$http.adornData({
              'id': this.dataForm.id || undefined,
              'name': this.dataForm.name,
              'creditCode': this.dataForm.creditCode,
              'province': this.dataForm.areaCodes[0],
              'city': this.dataForm.areaCodes[1],
              'area': this.dataForm.areaCodes[2],
              'address': this.dataForm.address,
              'principalId': this.dataForm.principalId,
              'remark': this.dataForm.remark
            })
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.visible = false
                  this.$emit('refreshDataList')
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
// 　.addressCascader{
// 　　::deep .el-checkbox__inner{
// 　　　border-radius: 50%;
// 　　}
// 　}
.addressCascader{
   /* ... */
   width: 100%;
 }
</style>
